<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Extbox Example - Plain style without images</title>

    	<link href="../basic.css" rel="stylesheet" />
    	<link href="plain/style.css" rel="stylesheet" />

    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js"></script>
        <script type="text/javascript" src="../js/extbox.js"></script>

        <script type="text/javascript">
            Ext.ux.extbox.register('a[rel^=single]', false, {close: '&#215;', hideInfo: 'auto'});
            Ext.ux.extbox.register('a.grouped', true, {easing: 'elasticOut', resizeDuration: 0.6, current: "{current} of {total}", close: '&#215;'});
            Ext.ux.extbox.register('a[rel^=scaled]', true, {maxWidth: '80%', maxHeight: '80%', overlayOpacity: 0.3, overlayDuration: 0.1, current: "{current} of {total}", close: '&#215;', hideInfo: 'auto'});
            Ext.ux.extbox.register('a.flashajax', false, {innerWidth: 520, innerHeight: 420, title: 'Custom title', scale: false, current: "{current} of {total}", close: '&#215;'});
            Ext.ux.extbox.register('a.w3cblog', false, {width: 900, height: 500, iframe: true, title: 'Open <a href="http://www.w3.org/blog/CSS" target="_blank">W3C blog</a> in new window', current: "{current} of {total}", close: '&#215;'});
            Ext.ux.extbox.register('a.flashlink', false, {innerWidth: 520, innerHeight: 420, iframe: true, scale: false, current: "{current} of {total}", close: '&#215;'});
            Ext.ux.extbox.register('a.inline', false, {href: '#inline_example', innerWidth: 520, innerHeight: 420, inline: true, scale: false, current: "{current} of {total}", close: '&#215;', hideInfo: 'auto'});        </script>
    </head>

    <body>
<div id="content">

    <h2>Plain style without images</h2>

    <h4>Single images: all defaults, autohide title</h4>
    <div class="thumbnail">
        <a href="http://farm1.static.flickr.com/197/482126987_939e1efd02_o.jpg" rel="single" title="Gral Vicuña Macenna"><img src="http://farm1.static.flickr.com/197/482126987_65afec6e0b_t.jpg" alt="Gral Vicuña Macenna" width="100" height="75"></a>
    </div>
    <div class="thumbnail">
        <a href="http://farm1.static.flickr.com/177/482127785_dddb3016ac_o.jpg" rel="single" title="Avenida Bernardo O´Higgins"><img src="http://farm1.static.flickr.com/177/482127785_93c0efbcc6_t.jpg" alt="Avenida Bernardo O´Higgins" width="100" height="75"></a>
    </div>
    <div class="thumbnail">
        <a href="http://farm1.static.flickr.com/232/482125575_8c6d8e6d48_o.jpg" rel="single" title="Cerro Santa Lucia"><img src="http://farm1.static.flickr.com/232/482125575_5709104242_t.jpg" alt="Cerro Santa Lucia" width="100" height="75"></a>
    </div>
    <div class="thumbnail">
        <a href="http://farm2.static.flickr.com/1150/534004324_69b6d92242_o.jpg" rel="single" title="Cerro San Cristobal"><img src="http://farm2.static.flickr.com/1150/534004324_775185b300_t.jpg" alt="Cerro San Cristobal" width="100" height="75"></a>
    </div>
    <div class="thumbnail">
        <a href="http://farm1.static.flickr.com/175/482125797_e67696ece6_o.jpg" rel="single" title="Cerro Santa Lucia"><img src="http://farm1.static.flickr.com/175/482125797_338f51a1dd_t.jpg" alt="Cerro Santa Lucia" width="100" height="75"></a>
    </div>
    <div class="clear"></div>

    <h4>Grouped images: custom transition (elasticOut) and duration</h4>

    <div class="thumbnail">
        <a href="http://farm1.static.flickr.com/196/511243205_951d724d5c_o.jpg" class="grouped" title="Perros en La Moneda"><img src="http://farm1.static.flickr.com/196/511243205_fd87db2f72_t.jpg" alt="Perros en La Moneda" width="100" height="75"></a>
    </div>
    <div class="thumbnail">
        <a href="http://farm2.static.flickr.com/1129/640390421_15c072d4ff.jpg" class="grouped" title="Las nieves de Santiago"><img src="http://farm2.static.flickr.com/1129/640390421_15c072d4ff_t.jpg" alt="Las nieves de Santiago" width="100" height="75"></a>
    </div>
    <div class="thumbnail">
        <a href="http://farm1.static.flickr.com/181/482124663_db4579ee55_o.jpg" class="grouped" title="Vista de Santiago"><img src="http://farm1.static.flickr.com/181/482124663_4abaebcb11_t.jpg" alt="Vista de Santiago" width="100" height="75"></a>
    </div>
    <div class="thumbnail">
        <a href="http://farm2.static.flickr.com/1368/534002784_160cfcefa8_o.jpg" class="grouped" title="Invierno en Santiago"><img src="http://farm2.static.flickr.com/1368/534002784_5d92129c06_t.jpg" alt="Invierno en Santiago" width="100" height="75"></a>
    </div>
    <div class="thumbnail">
        <a href="http://farm2.static.flickr.com/1253/842998125_b72faae04d_o.jpg" class="grouped" title="Las nieves de Santiago"><img src="http://farm2.static.flickr.com/1253/842998125_0448a0523a_t.jpg" alt="Las nieves de Santiago" width="100" height="75"></a>
    </div>
    <div class="clear"></div>

    <h4>Grouped images: large photos scaled to 80% of viewport, overlay opacity 30%, duration 0.1, autohide title</h4>

    <div class="thumbnail">
        <a href="http://farm2.static.flickr.com/1141/763122792_6472d3202e.jpg" rel="scaled" title="Nueva York Calle"><img src="http://farm2.static.flickr.com/1141/763122792_6472d3202e_t.jpg" alt="Nueva York Calle" width="100" height="75"></a>
    </div>
    <div class="thumbnail">
        <a href="http://farm2.static.flickr.com/1262/763124192_66d33aaf31_o.jpg" rel="scaled" title="Nueva York Calle"><img src="http://farm2.static.flickr.com/1262/763124192_7394b3ce34_t.jpg" alt="Nueva York Calle" width="100" height="75"></a>
    </div>
    <div class="thumbnail">
        <a href="http://farm2.static.flickr.com/1150/1420949744_c27681524e.jpg" rel="scaled" title="Bandera Calle"><img src="http://farm2.static.flickr.com/1150/1420949744_c27681524e_t.jpg" alt="Bandera Calle" width="100" height="75"></a>
    </div>
    <div class="thumbnail">
        <a href="http://farm2.static.flickr.com/1141/763122792_0966a17aee_o.jpg" rel="scaled" title="Nueva York Calle"><img src="http://farm2.static.flickr.com/1141/763122792_6472d3202e_t.jpg" alt="Nueva York Calle" width="100" height="75"></a>
    </div>
    <div class="thumbnail">
        <a href="http://farm2.static.flickr.com/1262/534104357_dfffe47e70_o.jpg" rel="scaled" title="Alameda"><img src="http://farm2.static.flickr.com/1262/534104357_b1c771dd38_t.jpg" alt="Alameda" width="100" height="75"></a>
    </div>
    <div class="clear"></div>

    <h4>Other content types</h4>

    <ul>
        <li><a href="flashcontent.html" class="flashajax" title="Funny cats">Ajax (some flash content)</a></li>

        <li><a href="http://blip.tv/play/gb4ygZmaLAA" class="flashlink" title="Funny cats">Iframe (direct link on blip.tv)</a></li>

        <li><a href="http://www.w3.org/blog/CSS" class="w3cblog">Scalable iframe with W3C CSS blog</a></li>

        <li><a href="#" class="inline" title="Inline content">Inline content</a></li>
    </ul>
    <div class="clear"></div>

<div id='inline_example' style="display: none">
    <p style="font-weight: bold">This is hidden inline content of this page.</p>
    <p><input type="button" value="button" /></p>
    <p>Vestibulum odio ipsum, egestas sit amet tristique eu, tristique quis ipsum. Vestibulum bibendum tempus mauris eget consectetur. Quisque orci dolor, pellentesque cursus volutpat varius, ullamcorper a lacus. Cras malesuada arcu eget tellus molestie egestas. Duis in nibh nisl, id vehicula turpis.</p>
    <p><input type="text" value="text input" /></p>
    <p>Quisque accumsan euismod interdum. Cras dapibus bibendum purus sit amet feugiat. Aliquam eget tellus erat, ac pharetra libero. Phasellus mattis nisi eros, placerat dapibus neque. Curabitur at blandit sapien. Vestibulum consequat placerat tellus sit amet feugiat.</p>
    <p>Sed sollicitudin tempus est, eu mattis turpis fermentum non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam urna felis, imperdiet et congue sed, vehicula ac dui. </p>
</div>
</div>

    </body>
</html>
